<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/register.css">
    <link rel="icon" href="jpg/favicon.ico" type="image/x-icon">

</head>
<style>
     .row {
    background-image: url(/jpg/11.jpg);
    opacity:0.5;
    
  }

  body{
        background-image: url(/jpg/11.jpg);
        /* background-repeat: no-repeat;
        width: 100%;     
        background-size: 100% auto;
        padding-top: 3%;
        height: 0px */

    }
    .div_foot {
        text-align: center;
        height: 100px;
        width: 100%;
        position: fixed;
        bottom: 1px;
    }

</style>


<body>



    <div class="row align-items-center" style="height: 40rem;">
        <div class="col">


        </div>
        <div class="col">

            <div class="card shadow rounded" style="width: 37rem;">

                <div class="card" style="width: 37rem;">
                    <div class="card-body">
                        <h2 class="logincenter"> 注册中心 </h2>
                        <form id="form1" method="POST" action="/registerDone">
                            <div class="form-group">
                                <label for="formGroupExampleInput">用户名</label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入您的账号">
                            </div>
                            <div class="form-group">
                                <label for="formGroupExampleInput2">密码</label>
                                <input type="password" class="form-control" id="password"  name="password"placeholder="请输入您的密码">
                            </div>
                            <div class="form-group">
                                <label for="formGroupExampleInput2">确认密码</label>
                                <input type="password" class="form-control" id="againpassword" name="againpassword" placeholder="请再次输入您的密码">
                            </div>
                        </form>

                        <button type="button" class="btn1 btn-primary btn-lg" onclick="register()">注册</button>
                        <button type="button" class="btn2 btn-secondary btn-lg" onclick="jump1()">取消</button>
                    </div>
                </div>


            </div>
        </div>
        <div class="col">


        </div>
      
    </div>

    <div class="div_foot">
        <a style="color:pink">
            2021-2022©Lucas科技有限公司
        </a>

        <a href="https://beian.miit.gov.cn/" style="text-decoration:none; color: pink; margin-left: 30px;">
            赣ICP备2020013193号-1
        </a>

        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351206"
            style="display:inline-block;text-decoration:none;height:20px;line-height:20px; margin-left: 80px;"><img
                src="/jpg/备案图标.png" style="float:left;" />

        <a href="https://beian.miit.gov.cn/" style="text-decoration:none; color:pink ">
                闽公网安备 35080202351206号
        </a>

    </div>



    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        //跳转到登录界面
        function jump1() {
            window.location.href = "/login"
        }

        //使用ajax提交post请求
        function register() {
            let username = $("#username").val();
            let password = $("#password").val();
            let againpassword = $("#againpassword").val();
            if (username.length > 0 && password.length > 0 && password === againpassword) {
                //ajax请求(先进行前端验证数据 然后通过ajax请求向后端提交数据)
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/registerDone",//url
                    data: $('#form1').serialize(),
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        if (result.resultCode == 200) {
                           window.location.href="/login"
                        }else{
                            alert(result.msg);
                        }
                        
                    },
                    error: function () {
                        alert("网络异常！");
                    }
                });
            }
            else{
                alert("请检查账号密码是否都有填写或者两次密码是否相同")
            }
        }

        


    </script>
</body>

</html>